<template>
	<!-- 保持原有模板结构不变，仅调整数据绑定 -->
	<view class="container">
		<swiper class="swiper" @click="handleSwiperClick">
			<swiper-item>
				<image :src="foodDetail.images[0]" mode="aspectFill" class="swiper-image" />
			</swiper-item>
		</swiper>

		<view class="info-box">
			<text class="food-title">{{ foodDetail.name }}</text>
			<view class="price-section">
				<text class="price">¥{{ foodDetail.price }}</text>
				<!-- 已售字段需要确认数据来源 -->
				<!-- <text class="sales">已售{{ foodDetail.sales }}份</text> -->
			</view>
		</view>

		<!-- 评论区域 -->
		<view class="comment-section">
			<view class="section-header">
				<text class="section-title">评价（{{ comments.length }}）</text>
			</view>

			<scroll-view scroll-y class="comment-list">
				<view v-for="comment in comments" :key="comment.reviewId" class="comment-item">
					<image :src="comment.avatar" class="user-avatar" />
					<view class="comment-content">
						<text class="username">{{ comment.username }}: </text>
						<view class="star-rating">
							<text v-for="i in 5" :key="i" class="star-icon"
								:class="i <= comment.rating ? 'active' : ''">
								{{ i <= comment.rating ? '★' : '☆' }}
							</text>
						</view>
						<view class="comment-text">{{ comment.content }}</view>
						<view class="comment-images" v-if="comment.imageUrl">
							<image :src="comment.imageUrl" class="comment-image" mode="aspectFill" />
						</view>
						<text class="comment-time">{{ comment.time }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		queryFoodDetail
	} from '../../request/api.js'

	const foodDetail = reactive({
		id: null,
		name: '',
		price: 0,
		images: []
	})

	const comments = ref([])

	// 时间格式化函数
	const formatDate = (dateStr) => {
		const date = new Date(dateStr)
		const year = date.getFullYear()
		const month = (date.getMonth() + 1).toString().padStart(2, '0')
		const day = date.getDate().toString().padStart(2, '0')
		return `${year}-${month}-${day}`
	}

	onLoad(async (options) => {
		try {
			const res = await queryFoodDetail(options.id)
			const data = res.itemDetail

			// 更新餐品信息
			Object.assign(foodDetail, {
				id: options.id,
				name: data.itemInfo.name,
				price: data.itemInfo.price,
				images: [data.itemInfo.item_imageUrl]
			})

			// 处理评论数据
			if (data.reviews[0].reviewId) {
				comments.value = data.reviews.map(review => ({
					reviewId: review.reviewId,
					content: review.comment,
					imageUrl: review.imageUrl,
					time: formatDate(review.createdAt),
					username: '用户' + review.reviewId.toString().slice(-4),
					rating: parseInt(review.rating) || 0,
					avatar: 'http://175.178.118.46:3000/uploads/image-1745286571440-192477150.jpeg'
				}))
			}


		} catch (error) {
			uni.showToast({
				title: '数据加载失败',
				icon: 'none'
			})
		}
	})

	const handleFilterChange = (filter) => {
		activeFilter.value = filter
	}

	const loadMoreComments = () => {
		if (!loading.value) loadComments()
	}

	const previewCommentImages = (images, index) => {
		if (!images || !images.length) return

		uni.previewImage({
			current: images[index],
			urls: images,
			indicator: 'default',
			success: () => {
				uni.vibrateShort() // 震动反馈
			},
			fail: (err) => {
				uni.showToast({
					title: '图片加载失败',
					icon: 'none'
				})
			}
		})
	}
	const handleSwiperClick = (e) => {
		uni.previewImage({
			current: foodDetail.images[0],
			urls: foodDetail.images
		})
	}
</script>

<style scoped>
	.container {
		background: #f5f5f5;
		min-height: 100vh;
	}

	.swiper {
		height: 500rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.info-box {
		padding: 30rpx;
		background: white;
	}

	.food-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.price-section {
		margin-top: 20rpx;
		display: flex;
		align-items: baseline;
	}

	.price {
		color: #ff4a07;
		font-size: 40rpx;
		font-weight: bold;
	}

	.unit {
		color: #999;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.sales {
		color: #666;
		font-size: 28rpx;
		margin-left: 30rpx;
	}

	.divider {
		height: 1px;
		background: #eee;
		margin: 30rpx -30rpx 0;
	}

	.comment-section {
		margin-top: 20rpx;
		background: white;
		padding: 30rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.filter-buttons {
		display: flex;
		gap: 20rpx;
	}

	.filter-tag {
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		background: #f5f5f5;
		color: #666;
		font-size: 24rpx;
	}

	.filter-tag.active {
		background: #fff0e6;
		color: #ff4a07;
	}

	.comment-list {
		max-height: 800rpx;
		margin-top: 20rpx;
	}

	.comment-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
		display: flex;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.comment-content {
		flex: 1;
	}

	.username {
		color: #666;
		font-size: 28rpx;
	}

	.comment-text {
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #333;
		line-height: 1.5;
	}

	.comment-images {
		margin-top: 20rpx;
		display: flex;
		gap: 10rpx;
	}

	.comment-image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
	}

	.comment-time {
		display: block;
		margin-top: 15rpx;
		color: #999;
		font-size: 24rpx;
	}

	.loading-text {
		text-align: center;
		padding: 20rpx;
		color: #999;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.comment-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin-top: 10rpx;
	}

	.star-rating {
		margin-left: 20rpx;
	}

	.star-icon {
		color: #ccc;
		font-size: 28rpx;
		margin-right: 6rpx;
	}

	.star-icon.active {
		color: #ff9900;
	}
</style>